<template>
  <div class="playerGroup">
    <el-row>
      <el-button type="primary" @click="addGroupShow = true"
        >+ 新增分组</el-button
      >
    </el-row>
    <div class="table">
      <el-table
        ref="playerList"
        :data="groupList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="分组名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="quantity"
          label="选手数"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-dropdown trigger="click" placement="bottom">
                <span style="font-size: 14px">
                  <i class="el-icon-more"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleEdit(scope.row)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="handleDelete(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="新增分组"
      :visible.sync="addGroupShow"
      width="450px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @closed="handleClosed"
    >
      <el-form
        :model="groupForm"
        :rules="rulesGroup"
        ref="groupForm"
        label-width="100px"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input
            v-model="groupForm.name"
            placeholder="请输入分组名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button @click="addGroupShow = false">取消</el-button>
            <el-button type="primary" @click="handleOk">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: "",
      groupList: [],
      addGroupShow: false,
      rulesGroup: {
        name: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
      },
      groupForm: {
        name: "",
      },
      groupId: 0,
    };
  },
  created() {
    this.getGroup();
  },
  methods: {
    getGroup() {
      this.$api("player.getGroup", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.groupList = res;
      });
    },
    handleOk() {
      this.$refs.groupForm.validate((valid) => {
        if (valid) {
          this.$api("player.saveGroup", {
            id: this.groupId || 0,
            name: this.groupForm.name,
            voteId: Number(this.$route.query.id),
          }).then((res) => {
            console.log(res);
            this.addGroupShow = false;
            this.$store.commit("status/SET_URL", new Date().getTime());
            this.$message({
              message: this.groupId ? "修改成功" : "保存成功",
              type: "success",
              duration: 1000,
            });
            this.getGroup();
          });
        }
      });
    },
    handleClosed() {
      this.groupForm.name = "";
      this.groupId = "";
    },
    handleEdit(data) {
      console.log(data);
      this.groupId = data.id;
      this.addGroupShow = true;
      this.groupForm.name = data.name;
    },
    handleDelete(data) {
      console.log(data);
      this.$confirm("确定要删除该分组吗?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api("player.deleteGroup", {
            id: data.id,
          }).then((res) => {
            console.log(res);
            this.$store.commit("status/SET_URL", new Date().getTime());
            this.$message({
              type: "success",
              message: "删除成功!",
              duration: 1000,
            });
            this.getGroup();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.playerGroup {
  width: 900px;
  min-height: 550px;
  .el-row {
    width: 100%;
    .el-button {
      width: 160px;
      height: 30px;
      line-height: 0.5;
    }
  }
  .table {
    margin-top: 30px;
  }
}
</style>